import React from 'react'
import { useTranslation } from 'react-i18next'
import { Table, ConfigProvider } from 'antd'
//引入useSelector
// import { useSelector, useDispatch } from 'react-redux'
// antd中提供的语言包
import zhCN from 'antd/es/locale/zh_CN'
import enUS from 'antd/es/locale/en_US'
// 引入actionCreator
import { setLang } from './redux/store'
import { appAsync } from './redux/slice'
import { useAppDispatch, useAppSelector } from './redux/hooks'

export default function App() {
  // state后面是临时给state定义的接口. 如果不写默认是unknow类型.下面的state.app.lang会有提示报错
  // const lang = useSelector((state: RootState) => {
  //   return state.app.lang
  // })

  // const dispatch = useDispatch<AppDispatch>()

  const lang = useAppSelector((state) => {
    return state.app.lang
  })
  const dispatch = useAppDispatch()

  // t是一个函数,t会自动找到语言包,并根据传入的键,找到对应的值并返回
  // 传入的['app']是t在找到语言包之后,会自动找语言包对象中app属性指向的对象
  const [t, i18n] = useTranslation(['app'])
  return (
    <ConfigProvider locale={lang === 'zh' ? zhCN : enUS}>
      <div>
        <button
          onClick={() => {
            i18n.changeLanguage('zh')
            // 修改redux中lang的值
            dispatch(setLang('zh'))
          }}
        >
          中文
        </button>
        <button
          onClick={() => {
            i18n.changeLanguage('en')
            dispatch(appAsync())
          }}
        >
          english
        </button>
      </div>
      <hr />
      {t('h')}
      {t('test')}

      <hr />
      <Table
        columns={[
          {
            title: t('index'),
            render(a, b, index) {
              return index + 1
            },
          },
          {
            title: t('name'),
            dataIndex: 'name',
          },
          {
            title: t('info'),
            dataIndex: 'info',
          },
        ]}
        dataSource={[
          {
            id: 1,
            name: 'hj',
            info: 'lsp',
          },
          {
            id: 2,
            name: 'lt',
            info: 'lsp2',
          },
          {
            id: 3,
            name: 'lw',
            info: 'lsp3',
          },
          {
            id: 4,
            name: 'zt',
            info: 'lsp4',
          },
        ]}
        pagination={{
          total: 60,
          showSizeChanger: true,
          showQuickJumper: true,
        }}
        rowKey="id"
      ></Table>
    </ConfigProvider>
  )
}
